<template>
	<div >
		<button type="button" @click="isShow = !isShow">显示/隐藏</button>
		<!-- 使transition有apear属性 一刷新就有动画效果 -->
		<transition name="hello" appear>
			<h1 v-show="isShow" >你好啊</h1>
		</transition>
	</div>
</template>

<script>
	export default{
		name:'Test',
		data(){
			return{
				isShow:true
			}
		}
	}
</script>

<style scoped>
	h1{
		background-color: #ffaa00;
	}
	/* 进入时激活的样式 */
	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}
	/* 离开时激活的样式 */
	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}
	@keyframes atguigu{
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>
